<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/waterfull.css">
    <script  src="../bower_components/jQuery/dist/jquery.min.js"></script>
    <script>
        $(function () {
            var page=1;
            var flag=true;
            var winH=$(window).height();

            var heightArr=[];
            function waterfull(obj) {
                var oParent=document.getElementById('main');
                var aPin=obj;
                var iPinW=aPin[0].offsetWidth;
                var num=Math.floor(document.documentElement.clientWidth/iPinW);
                oParent.style.cssText ='width:'+num*iPinW+"px";


                var apinLen=aPin.length;
                for(var i=0;i<aPin.length;i++){
//                    console.log(i);
                    if(i<num && aPin.length>1){
                        heightArr.push(aPin[i].offsetHeight);
                        aPin[i].style.cssText="";
                    }else{
                        var minH=Math.min.apply({},heightArr);
                        maxH=Math.max.apply({},heightArr);
                        console.log(heightArr);
                        var minK=minKey(minH,heightArr);
                        apinLen==1?i=0:null;
                        aPin[i].style.position="absolute";
//                        aPin[i].style.top=minH+"px";
                        $(aPin[i]).css({
//                            left:($(window).width()-this.width())/2,
                            top:Math.max.apply({},heightArr)+300
                        }).animate({
//                            left:left,
                            top:minH
                        },600);
                        aPin[i].style.left=$('.pin')[minK].offsetLeft+"px";
                        heightArr[minK]+=aPin[i].offsetHeight;
                    }
                }
                oParent.style.height=maxH+"px";



                function minKey(h,arr) {
                    for(var i=0;i<arr.length;i++){
                        if(arr[i]==h){
                            return i;
                        }

                    }

                }
                function getClassObj(parent,className) {
                    var obj=parent.getElementsByTagName("*");
                    var result=[];
                    for(var i=0;i<obj.length;i++){
                        if(obj[i].className==className){
                            result.push(obj[i])
                        }
                    }
                    return result;
                }

            }
            waterfull($('.pin'));
            var timer;
            window.onresize=function () {
                heightArr=[]
                clearTimeout(timer);
                timer=setTimeout(function () {
                    waterfull($('.pin'));
                },100)

            }
            window.onscroll=function () {
                var scrollTop=$(document).scrollTop();
                var docH=$(document).height();
//                console.log(docH);
//                console.log(scrollTop+winH+200);
                if(scrollTop+winH+200>=docH && flag){
                    page++;
                    flag=false;
                    $.getJSON("http://127.0.0.1:1337?page="+page+"&callback=?",function (data) {
                        console.log(data);
                        $.each(data,function (idx,item) {
                            var pin=$('<div class="pin"><div style="height:'+(205/item.tpwidth)*(item.tpheight)+'px" class="box"><img style="opacity:1" class="img" src="'+item.titlepic+'"  alt=""></div><div>爱的色放都是第三方第三方</div></div>');
                            $('#main').append(pin);
//                            pin.find('.img').animate({"opacity":1},600)
                            waterfull(pin);

                        })

                        flag=true;
                    });

                }

            }
        });
    </script>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 372px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 271px;">
            <img src="../images/2.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 287px;">
            <img src="../images/4.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 144px;">
            <img src="../images/5.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 475px;">
            <img src="../images/6.jpg" alt="">
        </div>
    </div>
    <div class="pin">
        <div class="box" style="height: 373px;">
            <img src="../images/1.jpg" alt="">
        </div>
    </div>

</div>
</body>
</html>